﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <p>JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。</p>
    <div id="d1"></div>
</body>
</html>
<script type="text/jsx">
    var names = [{id:1,name:"Alice", age:21},{id:2,name:"Emily",age:22},{id:3,name:"Kate",age:23}];

    function getAge(age){
        if(age>21){
            return age;
        }
        return "less than 21";
    }

    React.render(
        <div>
            {
                names.map(function(item){
                    if(item.age >21){
                        return <div className='clear'><div className='left' key={item.id}>Hello, {item.name} my age is:</div><div className='left blue'> { getAge(item.age) }</div></div>
                    }
                    else{
                        return <div className='clear'><div className='left' key={item.id}>Hello, {item.name} my age is:</div><div className='left red'> { getAge(item.age) }</div></div>
                    }
                })
            }
        </div>
        ,$("#d1").get(0)
    );
</script>
